<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!--追加样式-->
<style>
    .mui-content {
        margin-bottom: 50px;
    }

    .mui-slider {
        height: 9em;
    }

    .iconfont {
        font-size: 120%;
    }

    .mui-tab-label {
        font-size: 70%;
    }
</style>
<style type="text/css">
    @font-face {
        font-family: "s";
        src: url('iconfont.eot?t=1518327079192'); /* IE9*/
        src: url('iconfont.eot?t=1518327079192#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
        url('iconfont.ttf?t=1518327079192') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg?t=1518327079192#s') format('svg'); /* iOS 4.1- */
    }

    .s {
        font-family: "s" !important;
        font-size: 34px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .book-liucheng:before {
        content: "\e64c";
    }

    .book-shu:before {
        content: "\e607";
    }

    .book-xin:before {
        content: "\e61c";
    }

    .book-shu-copy:before {
        content: "\e64d";
    }

</style>
<body>
<div class="mui-content">
    <ul class="mui-table-view mui-grid-view " style="background: #4a82d1;padding: 0; margin: 0;">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="margin: 0; padding: 15px 15px;">
            <a href="/iphone/toDriftList">
				<span class="mui-icon  s book-liucheng" style="color: white;width: 30px;height: 30px;">

				</span>
                <div class="mui-media-body" style="color: white;">漂流</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="margin: 0; padding: 15px 15px;">
            <a href="/iphone/stack">
                <span class="mui-icon s book-shu" style="color: white;width: 30px;height: 30px;"></span>
                <div class="mui-media-body" style="color: white;">看书</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="margin: 0; padding: 15px 15px;">
            <a href="/iphone/awishList">
                <span class="mui-icon s book-xin " style="color: white;width: 30px;height: 30px;"></span>
                <div class="mui-media-body" style="color: white;">心愿</div>
            </a>
        </li>

    </ul>
    <!--轮播图-->

        <!--本周推荐-->
        <div class="mui-row" th:attr="hidden=(${booklist==null} ? true:false)">
            <h4 style="padding: 5px">
                <a href="/iphone/stack"><font color="black">本周推荐</font></a>
            </h4>
            <ul class="mui-table-view mui-grid-view">
                <li class="mui-table-view-cell mui-media mui-col-xs-6" th:each="tuijian : ${booklist}">
                    <a th:href="'/iphone/bookinfo/'+${tuijian.bookId}">
                        <img class="mui-media-object" src="img/about-zuixin-02.jpg" th:src="${tuijian.bookImg}"
                             style="height: 13em;width: 40%"
                             style="padding: 10px;">

                        <div class="mui-media-body" th:text="${tuijian.bookName}">
                            品读经典，品味人生
                        </div>
                    </a>
                </li>
            </ul>
        </div>
       <!--最新漂流-->
        <div class="mui-row" th:attr="hidden=(${newbook==null} ? true:false)">
            <h4 style="padding: 5px">
                <a href="/iphone/stack"><font color="black">最新漂流</font></a>
            </h4>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" th:each="piaoliu : ${booklist}">
                    <a th:href="'/iphone/bookinfo/'+${piaoliu.bookId}">
                        <img class="mui-media-object mui-pull-left" th:src="${piaoliu.bookImg}">
                        <div class="mui-media-body">
                            <div th:text="${piaoliu.bookName}"></div>
                            <p class="mui-ellipsis" th:text="${piaoliu.author}">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div>
                    </a>
                </li>
            </ul>
        </div>



    <!--底部导航栏-->
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="/iphone">
            <span class="iconfont icon-geren1"></span><br/>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="/iphone/social">
            <span class="iconfont icon-jiaoliuweixuanzhong"></span><br/>
            <span class="mui-tab-label">交流圈</span>
        </a>
        <a class="mui-tab-item" href="/iphone/stack">
            <span class="iconfont icon-kucun"></span><br/>
            <span class="mui-tab-label">书库</span>
        </a>
        <a class="mui-tab-item" href="/iphone/user">
            <span class="iconfont icon-gerenzhongxin"></span><br/>
            <span class="mui-tab-label">我的</span>
        </a>

    </nav>
</div>
</body>

<!--JS-->
<div th:include="include :: footer"></div>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    mui('body').on('tap', 'a', function () {
        document.location.href = this.href;
    });
</script>
</html>